<template>
  <div class="hauner ha-upload" :class='`ha-upload__${type}`'>
    <div class="ha-upload-trigger" @click='triggerUp'>
      <input type='file' ref='file' @change='handleChange' :accept='accept'/>
      <slot name='trigger'></slot>
    </div>
    <div class="ha-upload-tips">
      <slot name='tips'></slot>
    </div> 
    <div class="ha-upload-file--lists">
      <ul>
        <li v-for='(file,i) in lists' :key='i'>
          <span v-if='type=="text"'>{{file.name || file.fileName}}</span>
          
        </li>
      </ul>
    </div>     
  </div>
</template>
<script>
export default {
  name: 'HaUpload',
  props: {
    accept: {type: String, default: ''},
    type: {type: String, default: 'text'},
  },
  data: () => ({
    
  }),
  computed: {},
  watch: {
  },
  created() {
  },
  mounted() {},
  methods: {
    triggerUp() {
      this.$refs.file.click()
    },

    handleChange(ev){
      const files = ev.target.files;
      if (!files) return;
      this.uploadFiles(files);
    },

    uploadFiles(files) {
      this.$emit('uploadFiles', files)
    }
  }
}
</script>
<style lang="scss" scoped>
  // .hauner.ha-upload.ha-upload__text{
  // }
</style>
